<!-- <template>
  <input
    type="text"
    v-model="objTestVal"
    ref="iptDom"
    id="wenben"
    @input="aaa()"
  />
  {{ objVal }}
  <br />
  {{ objTestVal }}
  <button @click="setVal">改变量</button>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
const textVal = ref("");
const objVal = reactive({
  name: 123,
});
const iptDom = ref(null);
console.log(iptDom.value, 15);
let objTestVal = reactive("123");
function setVal() {
  objVal.name = new Date().getTime();
  objTestVal = new Date().getTime();
  textVal.value = new Date().getTime();
  console.log(iptDom.value);
}

watch(objVal, (val) => {
  console.log(objTestVal, 24);
});
watch(textVal, (val) => {
  console.log(textVal, 27);
});
</script> -->

<template>
  <div class="app">
    <br />
    <button @click="setSonTestMsg">修改子组件变量</button>
    <zi
      style="background: aquamarine; color: white"
      src="//vueshop.glbuys.com/uploadfiles/1524556315.jpg"
      :params="ziParams"
      ref="ziDom"
    ></zi>
  </div>
</template>
<script setup>
// import { nextTick, ref } from "vue";
// const textVal = ref("");
// let a = 123456;
// nextTick(() => {
//   document.getElementById("wenben").value = a;
// });
// function abc() {
//   console.log(textVal.value);
// }
// function btn() {
//   textVal.value = new Date().getTime();
//   console.log(textVal.value);
// }
// reactive 定义的基本类型不具备响应式
// reactive 只能定义复杂数据类型时才具备响应式
// ref 定义的变量 必须使用.value进行获取和设置值

// import { ref, reactive, watch } from "vue";
// const textVal = ref("");
// const objVal = reactive({ name: 132 });
// let TestVal = reactive("123");
// function btn() {
//   objVal.name = new Date().getTime();
//   TestVal = new Date().getTime();
//   textVal.value = new Date().getTime();
// }
// watch(TestVal, (val) => {
//   console.log(textVal, 24);
// });
// watch(textVal, (val) => {
//   console.log(textVal, 27);
// });
// watch(objVal, (val) => {
//   console.log(objVal, 26);
// });
import zi from "./zi.vue";
import { ref, provide } from "vue";
const ziParams = ref("父组件的变量");
const ziDom = ref(null);
function setSonTestMsg() {
  ziDom.value.testMsg = new Date().getTime();
}
provide("test", "父组件的变量-provide");
</script>
<style>
.app {
  width: 100%;
  height: 100vh;
  background-image: url("//vueshop.glbuys.com/uploadfiles/1484285334.jpg");

  background-repeat: no-repeat;
}
</style>
